<template>
  <div class="content">
    <div class="top">
      <div class="form-wrapper">
        <a-form
          layout="inline"
        >
          <a-form-item>
            <a-input placeholder="Username">
              <template #prefix />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              type="default"
              placeholder="Password"
            >
              <template #prefix />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
            >
              查询
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="center">
      <a-list
        item-layout="horizontal"
        :data-source="listData"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta
              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
            >
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="bottom">
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
      <div class="flex-child"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlexFullScreen',
  data(){
    return {
      listData:[
      {
        title: 'Ant Design Title 1',
      },
      {
        title: 'Ant Design Title 2',
      },
      {
        title: 'Ant Design Title 3',
      },
      {
        title: 'Ant Design Title 4',
      }
    ],
      dataSource: [
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        },
      ],

      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
          key: 'address',
        }
      ],
    };
  },
};
</script>

<style scoped lang="less">
@import "../style/common";
*{
  box-sizing: border-box;
}
@split-width: 16px;
.content{
  height: 100vh;
  border: @border-common;
  .top-center-bottom-layout();
  .top{
    height: 86px;
    border-bottom: @border-common;
    .form-wrapper{
      padding-top: 16px;
      display: flex;
      justify-content: center;
    }
  }
  .center{
    height: 256px;
    border-bottom: @border-common;
  }
  .bottom{
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    padding: @split-width 0 0 @split-width;
    overflow-y: auto;
    .flex-child{
      height: 230px;
      width: calc(25% - @split-width);
      background-color: cadetblue;
      margin: 0 @split-width @split-width 0;
    }
  }
}
</style>
